<template>
  背景色：<input v-model="btnTheme.backgroundColor" type="color" /> 文本色：<input
    v-model="btnTheme.color"
    type="color"
  />
  <br />
  <br />
  <!-- style：可以直接绑定对象数据源，但是对象数据源的属性名当样式属性（驼峰命名法，kebab-cased形式） -->
  <button :style="btnTheme">我是一个普通的按钮</button>

  <hr />

  背景色：<input v-model="backColor" type="color" /> 文本色：<input v-model="color" type="color" />
  边框圆角：<input v-model="borRadius" max="20" min="0" type="range" />
  <br />
  <br />
  <!-- style：可以直接写对象，但是对象的属性名当样式属性（驼峰命名法，kebab-cased形式） -->
  <button
    :style="{
      backgroundColor: backColor,
      color,
      'border-radius': borRadius + 'px',
    }"
  >
    我是一个普通的按钮
  </button>
</template>

<script setup>
import { reactive, ref } from 'vue'

let btnTheme = reactive({
  backgroundColor: '#FF0000', // 背景色
  color: '#000000', // 文本色
})
let backColor = ref('#0000FF') // 背景色
let color = ref('#FFFFFF') // 文本色
let borRadius = ref(20) // 边框圆角
</script>

<script>
export default {
  data: () => ({
    btnTheme: {
      backgroundColor: '#FF0000', // 背景色
      color: '#000000', // 文本色
    },
    backColor: '#0000FF', // 背景色
    color: '#FFFFFF', // 文本色
    borRadius: 20, // 边框圆角
  }),
}
</script>

<style scoped>
button {
  border: none;
  padding: 15px 20px;
  background-color: rgb(179, 175, 175);
}
</style>
